<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

    <div id="staggered-list-demo">
        <input v-model="query">
        <transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave">
            <li v-for="(item, index) in computedList" v-bind:key="item.msg" v-bind:data-index="index">{{ item.msg }}</li>
        </transition-group>
    </div>
</body>
<script>
    new Vue({
        el: '#staggered-list-demo',
        data: {
            query: '',
            list: [{
                msg: 'Bruce Lee'
            }, {
                msg: 'Jackie Chan'
            }, {
                msg: 'Chuck Norris'
            }, {
                msg: 'Jet Li'
            }, {
                msg: 'Kung Fury'
            }]
        },
        computed: {
            computedList: function() {
                var vm = this
                return this.list.filter(function(item) {
                    return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
                })
            }
        },
        methods: {
            beforeEnter: function(el) {
                el.style.opacity = 0
                el.style.height = 0
            },
            enter: function(el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function() {
                    Velocity(
                        el, {
                            opacity: 1,
                            height: '1.6em'
                        }, {
                            complete: done
                        }
                    )
                }, delay)
            },
            leave: function(el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function() {
                    Velocity(
                        el, {
                            opacity: 0,
                            height: 0
                        }, {
                            complete: done
                        }
                    )
                }, delay)
            }
        }
    })
</script>

</html>